<template>
  <div class="box">
    <a-form :model="form" :style="{ width: '450px' }" @submit="handleSubmit">
      <a-form-item
        field="roleName"
        label="角色名称"
        :rules="[
          { required: true, message: '必须填写角色名称' },
          { minLength: 2, message: '角色名不能低于两位' },
        ]"
      >
        <a-input
          v-model="form.roleName"
          placeholder="请输入角色名称"
          class="name"
        />
      </a-form-item>
      <a-form-item
        field="desc"
        label="角色描述"
        :rules="[
          { required: true, message: '必须填写角色描述' },
          { minLength: 3, message: '角色描述不能低于三位' },
        ]"
      >
        <a-input
          v-model="form.desc"
          placeholder="请输入角色描述"
          class="desc"
        />
      </a-form-item>
      <a-form-item field="updateTime" label="更新时间">
        <a-date-picker style="width: 400px" @change="handelTime" show-time />
      </a-form-item>
      <a-form-item>
        <a-button
          html-type="submit"
          type="primary"
          style="width: 400px; height: 40px"
          >提交</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { useUser } from "../../../store/user";
import { updateRole } from "../../../api/user/user";
import { RoleObj } from "../../../types/tanTypes/role";
import { ValidatedError } from "@arco-design/web-vue";
import { Message } from "@arco-design/web-vue";

const userStore = useUser();
const { roleName, desc, updateTime, key, objectId } =
  userStore.RoleObject[userStore.index];
const form = reactive<RoleObj>({
  roleName,
  desc,
  updateTime,
  key,
});

// 时间选择器
const handelTime = (date: string) => {
  form.updateTime = date;
};
// 更改角色
const handleSubmit = async (
  _: {
    values: Record<string, any>;
    errors: Record<string, ValidatedError> | undefined;
  },
  error: Event
) => {
  // 关闭抽屉
  userStore.visible = false;
  if (form.roleName) {
    // 更改脚色
    await updateRole(objectId!, form);
    // 修改状态及
    userStore.RoleObject[userStore.index] = form;
    Message.success('修改成功')
  }
};
</script>

<style lang="scss" scoped>
.box {
  .name,
  .desc {
    height: 40px;
  }
}
</style>
